<template>
  <div class='wrap'>
    <div class='text'>
      <h1 class='title'>新闻中心</h1>
      <div class='content'>这里是内容简介，比如一些描述性文字，还可以是其他的文字，这里是示例效果</div>
    </div>
    <div class='box'>
      <h2 class='box_title'>副标题</h2>
      <div class='box_content_wrap'>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
      </div>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>
    <!-- <div class='box'>
      <h2 class='box_title'>互联网内容服务</h2>
      <div class='box_content_wrap'>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
      </div>
    </div>
    <div class='box'>
      <h2 class='box_title'>工业物联网服务</h2>
       <div class='box_content_wrap'>
        <div class='box_content'>示例,标题文字是这样的，效果显示</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
        <div class='box_content'>示例</div>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
  
</script>

<style lang="scss" scoped>
.wrap{
  height: 100vh;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  >.text{
    display:flex;
    width:1520px;
    flex-direction: column;
    justify-content: flex-start;
    
    height: 20vh;
    >.title{
      margin:50px;
    } 
    >.content{
      margin:0px 50px;
      margin-bottom: 30px;
    }
  }
}
.box{
  height: 50vh;
  width:1520px;
  .box_title{
    margin-left: 30px;
  }
  >.box_content_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    >.box_content{
      background-image: url("@/assets/photo4.jpg");
      background-repeat: no-repeat;
      background-size:100% 100% ;
      margin: 10px;
      border-radius: 10px;
      height: 200px;
      width:350px;
      padding: 10px;
      display: flex;
      color:white;
      align-items: flex-end;
    }
  }
}
</style>